<template>
  <div class="mainBody"
       style="height: 100%">
    <el-row :gutter="20"
            style="margin-left: 20px;height: 40px;line-height: 40px">
      <el-col :span="4">
        <el-button @click="closewin()"
                   type="warning">关闭本页</el-button>
        <!--        <el-button @click="selectFile(id)">上传文件</el-button>-->
        <input type="file"
               ref="fileInput"
               style="display: none"
               @change="handleFileChange" />
      </el-col>
      <el-col :span="18"
              style="text-align: right">

      </el-col>
    </el-row>
    <div class="wrap">
      <div class="box"
           ref="box"
           style="height: 100%">

        <div class="left"
             style="height: 100vh;">
          <!--左侧div内容-->
          <el-collapse accordion>
            <p><span class="title">项目名: </span> {{ fileInfoForm.project.projName }}</p>
            <el-divider></el-divider>
            <p><span class="title">合同编号:</span> {{ fileInfoForm.id }}</p>
            <el-divider></el-divider>
            <p><span class="title">合同标题:</span> {{ fileInfoForm.title }}</p>
            <el-divider></el-divider>
            <p><span class="title">负责人部门：</span><span>{{fileInfoForm.depart.name}}</span></p>
            <el-divider></el-divider>
            <p><span class="title">签订人：</span>{{ fileInfoForm.user.userName }}</p>
            <el-divider></el-divider>
            <p><span class="title">文件数量:</span> <span> {{ fileInfoForm.fileCount}} </span> </p>
            <el-divider></el-divider>
            <p><span class="title"> 创建时间:</span> {{ fileInfoForm.createTime}} </p>
            <el-divider></el-divider>

          </el-collapse>

          <el-table scrollbar-always-on
                    :data="fileInfoForm.fileList"
                    height="250"
                    border
                    :header-cell-style="{color: 'white', fontSize: '14px', background: '#81AAD2'}"
                    style="width: 80%;margin: 2px auto"
                    empty-text="项目暂时没有文件"
                    align="center">
            <el-table-column type="index"
                             width="50">
            </el-table-column>
            <el-table-column prop="fileOriginName"
                             label="文件名"
                             width="380"
                             align="center">
            </el-table-column>
            <el-table-column prop="createTime"
                             label="上传时间"
                             width="180"
                             align="center">
            </el-table-column>
            <el-table-column prop="fileSizeInfo"
                             label="文件大小"
                             width="180"
                             align="center">
            </el-table-column>
            <el-table-column prop="phone"
                             label="操作"
                             width="180"
                             align="center">
              <template #default="scope">

                <el-button size="small"
                           @click="downFile(scope.row.fileOriginName,scope.row.fileObjectName)">下载</el-button>

              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>
  </div>
</template>


<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { RouterView } from 'vue-router'
import { ref, onMounted } from "vue"
import {
  uploadOneFile,
} from "@/api/file";
import {
  getConFilesPage,
  updateConFiles,
  deletedConFiles,
  addConFiles,
  getConFilesById
} from "@/api/conFiles";

import axios from "axios";
import { useUserStore } from "@/stores/userStores";
import { useRouter } from "vue-router";
const userStore = useUserStore();
const router = useRouter();

// 传参
import { useRoute } from "vue-router"
const route = useRoute();

const fileInfoForm = ref({
  id: '', //项目id
  project: {},
  user: {},
  projUserId: '', //项目负责人
  depart: {},
  projMat: '', //建设内容
  totalPlanPrice: '', //计划总投资
  totalPrice: '', //实际总投资
  planStartTime: '', //计划开工时间
  planEndTime: '', //计划结束时间
  finalStartTime: '', //实际开工时间
  finalEndTime: '', //实际结束时间
  ownerUnit: '', //业主单位
  doUnit: '', //实施单位
  remark: '', //备注
  projStatus: '', //项目完成状态 0未完成 1已完成
  createTime: '', //创建时间
  updateTime: '', //更新时间

});

const id = ref(1);
function closewin () {
  router.push("/admin/conFiles");
};



// 文件相关
const fileInput = ref(null)

const file = ref(null)
const conId = ref(1);
const type = 1;
const selectFile = (id) => {
  conId.value = id;
  fileInput.value.click()     //点击按钮触发输入框选择文件

}

const handleFileChange = (e) => {    //当输入框选择文件后
  file.value = e.target.files[0]
  if (!file.value) return
  uploadFile(file)

}

const uploadFile = async (file) => {    //将输入框选择的文件和参数id一起添加进formData
  const formData = new FormData()
  formData.append('file', file.value) //file.value是上传的文件
  formData.append('noId', conId.value) //id是要携带的参数
  formData.append('type', type) //id是要携带的参数
  console.log("文件=>{}", formData)
  const res = await uploadOneFile(formData);
  if (res.code === 200) {
    ElMessage.success("上传成功");
    openDetail();
    loadData();
  }

}

import { downloadFile } from "@/utils/fileUtils"
function downFile (fileOriginName, url) {
  return axios({
    url: `http://127.0.0.1:9091/file-manger/down-one`,
    method: 'get',
    responseType: 'blob',
    params: {
      path: url
    },
    headers: {
      'content-type': 'application/x-zip-compressed;charset=UTF-8',
      // 'X-Token': store.state.user.token
    }
  }).then(response => {
    const length = response.szie;
    if (length) {

      if (length == 0) {
        return Message.info(`文件下载异常！`)
      }
    } else {

      downloadFile(response, fileOriginName);
    }
  })
}



const openDetail = async () => {
  id.value = route.params.id;
  const res = await getConFilesById(id.value);
  fileInfoForm.value = res.data;
  console.log("拿到的详情值{}", fileInfoForm.value)
}

onMounted(() => {
  // 初始加载分页数据
  openDetail();
});

</script>

<style scoped lang="">
</style>
